import { createClient } from "https://esm.sh/@supabase/supabase-js@2";

const SUPABASE_URL = "https://mhvphjcreqhfnulflgiy.supabase.co";
const SUPABASE_KEY = "sb_publishable_CPulXF1pmXf_7RacRrv1ag_MHuGAxXC";
const supabase = createClient(SUPABASE_URL, SUPABASE_KEY);

const genres = ["All","Werewolf","Mafia","Erotica","LGBTQ","Billionaire Drama","Vampire","Paranormal","Christian Romance"];
let books = [];
let selectedGenre = "All";
let currentBook = null;
let chapters = [];
let currentChapterIndex = 0;
let reader = null;
let isRegister = false;
let libraryIds = new Set();
const unlockedChapterIds = new Set();
const $ = id => document.getElementById(id);

function notify(message) {
  const toast = $("toast");
  if (!toast) return;
  toast.textContent = message;
  toast.style.display = "block";
  clearTimeout(window.toastTimer);
  window.toastTimer = setTimeout(() => toast.style.display = "none", 3500);
}

function escapeHTML(value = "") {
  return String(value).replace(/[&<>"']/g, c => ({
    "&":"&amp;","<":"&lt;",">":"&gt;","\"":"&quot;","'":"&#39;"
  })[c]);
}

function showPage(name) {
  if (name === "profile" || name === "account") name = reader ? "profile" : "account";
  const page = $("page-" + name);
  if (!page) return;
  document.querySelectorAll(".page").forEach(p => p.classList.remove("active"));
  page.classList.add("active");
  document.querySelectorAll("[data-page]").forEach(b => b.classList.toggle("active", b.dataset.page === name));
  window.scrollTo({ top: 0, behavior: "smooth" });
  if (name === "profile" && reader) loadProfile();
  if (name === "notifications") loadNotifications();
  if (name === "wallet" && reader) loadTransactions();
}

function renderGenres() {
  ["home-genres","browse-genres"].forEach(id => {
    const el = $(id);
    if (!el) return;
    el.innerHTML = genres.map(g =>
      `<button class="genre ${g === selectedGenre ? "active" : ""}" data-genre="${escapeHTML(g)}">${escapeHTML(g)}</button>`
    ).join("");
  });
}

function bookCard(book) {
  const id = escapeHTML(book.id);
  const title = escapeHTML(book.title || "Untitled story");
  const author = escapeHTML(book.author || book.author_name || "Fictional World");
  const genre = escapeHTML(book.genre || "Fiction");
  const cover = book.cover_url || book.cover_image || "";
  return `<article class="book-card" data-open-book="${id}" tabindex="0" role="button">
    <div class="cover">${cover ? `<img loading="lazy" src="${escapeHTML(cover)}" alt="${title}" onerror="this.remove()">` : ""}
      <div class="cover-fallback">${title}</div></div>
    <h3>${title}</h3><p>${author}</p><span class="tag">${genre}</span>
  </article>`;
}

function renderBookList(target, list) {
  const el = $(target);
  if (!el) return;
  el.innerHTML = list.length ? list.map(bookCard).join("") : `<div class="empty">No stories to display yet.</div>`;
}

function filteredBooks() {
  const q = ($("search-input")?.value || "").trim().toLowerCase();
  return books.filter(b => {
    const genreMatch = selectedGenre === "All" || String(b.genre || "").toLowerCase() === selectedGenre.toLowerCase();
    const searchMatch = !q || [b.title, b.author, b.author_name, b.genre].some(v => String(v || "").toLowerCase().includes(q));
    return genreMatch && searchMatch;
  });
}

function renderBooks() {
  const featured = books.filter(b => b.featured === true);
  renderBookList("featured-books", featured.slice(0, 5).concat(books.filter(b => !b.featured).slice(0, Math.max(0, 5 - featured.length))));
  renderBookList("ongoing-books", books.filter(b => /ongoing/i.test(b.status || "")).slice(0, 5));
  renderBookList("completed-books", books.filter(b => /completed/i.test(b.status || "")).slice(0, 5));
  const list = filteredBooks();
  renderBookList("all-books", list);
  const total = $("book-total");
  if (total) total.textContent = `${list.length} stories`;
  const heading = $("browse-heading");
  if (heading) heading.textContent = selectedGenre === "All" ? "All stories" : selectedGenre;
  renderGenres();
}

async function loadBooks() {
  const allBooks = $("all-books");
  if (allBooks) allBooks.innerHTML = `<p class="muted">Loading stories...</p>`;
  const { data, error } = await supabase.from("books").select("*").limit(100);
  if (error) {
    console.error("Books:", error.message);
    if (allBooks) allBooks.innerHTML = `<div class="empty">Stories could not be loaded. Please refresh and try again.</div>`;
    notify("Unable to load stories. Please try again.");
    return;
  }
  books = data || [];
  renderBooks();
}function renderPackages() {
  const packages = [
    { id: "coins_100", coins: 100, price: "$2.99" },
    { id: "coins_300", coins: 300, price: "$7.99" },
    { id: "coins_600", coins: 600, price: "$14.99" },
    { id: "coins_1200", coins: 1200, price: "$27.99" }
  ];
  const el = $("coin-packages");
  if (el) el.innerHTML = packages.map(p => `
    <div class=\"plan\"><div class=\"eyebrow\">Coin package</div><h2>${p.coins.toLocaleString()} coins</h2><div class=\"price\">${p.price}</div>
    <button class=\"btn primary buy-product\" data-type=\"coins\" data-id=\"${p.id}\" style=\"width:100%\">Get coins</button></div>`
  ).join("");

  const plans = [
    { id: "readers_pass", name: "Readers Pass", monthly: "$5.99", yearly: "$49.99", benefits: ["No banner ad","50 free coins monthly","5% off on coin purchases"] },
    { id: "vip_reader", name: "VIP Reader", monthly: "$9.99", yearly: "$89.99", benefits: ["No banner ad","150 free coins monthly","9% off on coin purchases"] },
    { id: "exclusive_reader", name: "Exclusive Reader", monthly: "$19.99", yearly: "$179.99", benefits: ["No banner ad","300 free coins monthly","15% off on coin purchases","2 free chapter unlocks"] }
  ];
  const membershipEl = $("membership-plans");
  if (membershipEl) membershipEl.innerHTML = plans.map((p, i) => `
    <div class=\"plan ${i === 1 ? "featured" : ""}\"><div class=\"eyebrow\">${i === 1 ? "Popular choice" : "Reader membership"}</div>
    <h2>${p.name}</h2><div class=\"price\">${p.monthly}<small class=\"muted\"> / month</small></div>
    <p class=\"muted\">${p.yearly} when billed yearly</p><ul>${p.benefits.map(x => `<li>${x}</li>`).join("")}</ul>
    <button class=\"btn primary buy-product\" data-type=\"membership\" data-id=\"${p.id}\" style=\"width:100%\">Choose plan</button></div>`
  ).join("");
}

function updateAccountUI() {
  $("login-nav").textContent = "My Account";
  if (!reader) {
    $("profile-email").textContent = "Sign in to view your profile";
    $("profile-name").textContent = "Reader";
    $("profile-reader-id").textContent = "—";
    $("profile-gender").textContent = "Not provided";
    $("profile-avatar").textContent = "♡";
    return;
  }
  $("profile-email").textContent = reader.email || "";
  $("profile-name").textContent = reader.user_metadata?.display_name || reader.email?.split("@")[0] || "Reader";
}

async function getSession() {
  try {
    const { data: { session }, error } = await supabase.auth.getSession();
    if (error) {
      console.error("Session error:", error);
      reader = null;
      return;
    }
    reader = session?.user || null;
    if (!reader) {
      updateAccountUI();
      $("coin-count").textContent = "0";
      $("wallet-coins").textContent = "0";
      $("profile-coins").textContent = "0";
      return;
    }
    await loadProfile();
    await loadLibrary();
    await loadTransactions();
    await loadNotifications();
    if ($("page-account") && $("page-account").classList.contains("active")) showPage("profile");
  } catch (error) {
    console.error("Could not get session:", error);
    reader = null;
  }
}

async function loadProfile() {
  if (!reader) return;

  const { data, error } = await supabase.from("users").select("*").eq("auth_user_id", reader.id).maybeSingle();
  if (error) console.warn("Profile load error:", error.message);

  const profile = data || {};
  const name = profile.name || reader.user_metadata?.display_name || reader.email?.split("@")[0] || "Reader";
  const avatar = profile.avatar_url || profile.profile_picture || profile.photo_url || reader.user_metadata?.avatar_url || reader.user_metadata?.picture || "";
  const gender = profile.gender || reader.user_metadata?.gender || "Not provided";
  const coins = Number(profile.coin_balance ?? 0);

  $("coin-count").textContent = coins;
  $("wallet-coins").textContent = coins;
  $("profile-coins").textContent = coins;
  $("profile-display-name").value = name;
  $("profile-name").textContent = name;
  $("profile-email").textContent = reader.email || profile.email || "Email not available";
  $("profile-reader-id").textContent = profile.id ?? reader.id;
  $("profile-gender").textContent = gender;
  $("profile-tier").textContent = profile.subscription_tier || "Free";
  $("profile-tier-stat").textContent = profile.subscription_tier || "Free";
  $("profile-avatar").innerHTML = avatar
    ? `<img src="${escapeHTML(avatar)}" alt="Profile picture" onerror="this.parentElement.textContent='♡'">`
    : "♡";
}

async function loadLibrary() {
  if (!reader) {
    $("library-note").hidden = false;
    renderBookList("library-books", []);
    return;
  }

  const { data, error } = await supabase.from("library").select("*").eq("user_id", reader.id);
  if (error) {
    console.warn("Library load error:", error.message);
    return;
  }

  libraryIds = new Set((data || []).map(x => String(x.book_id)));
  $("profile-saved").textContent = libraryIds.size;
  $("library-note").hidden = libraryIds.size > 0;
  renderBookList("library-books", books.filter(b => libraryIds.has(String(b.id))));
}

async function loadTransactions() {
  if (!reader) return;

  const { data, error } = await supabase.from("transactions").select("*").eq("user_id", reader.id).order("created_at", { ascending: false }).limit(20);
  if (error) {
    console.warn("Transactions load error:", error.message);
    $("transactions").innerHTML = `<p class="muted">Transaction history is unavailable right now.</p>`;
    return;
  }

  if (!data || data.length === 0) {
    $("transactions").innerHTML = `<p class="muted">No transactions yet.</p>`;
    return;
  }

  $("transactions").innerHTML = data.map(t => `
    <div class="chapter-row">
      <span>${t.payment_status || "Transaction"} · ${t.amount_ngn ?? 0} NGN</span>
      <span>${t.coins_added ?? 0} coins</span>
    </div>
  `).join("");
}

async function loadNotifications() {
  const list = $("notification-list");
  if (!list) return;

  if (!reader) {
    list.innerHTML = `<p class="muted">Log in to view your notifications.</p>`;
    return;
  }

  const { data, error } = await supabase.from("notification").select("*").eq("user_id", reader.id).order("created_at", { ascending: false }).limit(30);
  if (error) {
    console.warn("Notifications load error:", error.message);
    list.innerHTML = `<p class="muted">Notifications are unavailable right now.</p>`;
    return;
  }

  if (!data || data.length === 0) {
    list.innerHTML = `<p class="muted">You're all caught up. No notifications are available.</p>`;
    return;
  }

  list.innerHTML = data.map(n => `
    <article class=\"chapter-row\">
      <div class=\"chapter-label\">
        <strong>${escapeHTML(n.title || "Notification")}</strong>
        <p class=\"muted\">${escapeHTML(n.message || n.body || "")}</p>
        <small class=\"muted\">${new Date(n.created_at).toLocaleString()}</small>
      </div>
      <span class=\"tag\">${escapeHTML(n.type || "info")}</span>
    </article>
  `).join("");
}